﻿var path = this.path;
define([this.path + './../4.x/plugins/esri/layers/DivGraphicsLayer.js',
        this.path + './../4.x/plugins/esri/DivGraphic.js'
    ],
    function(DivGraphicsLayer, DivGraphic) {
        var CustomPieLayer = DivGraphicsLayer.createSubclass({
            declaredClass: 'CustomPieLayer',
            setData: function(mapView, layer) {
                if (!mapView) return;
                debugger
                var me = this;
                var map = mapView.getMap();
                var mapUtils = mapView.mapUtils;
                me.imageUrl = path + './../../one-map/1.0.0/src/mode/arcgis/css/images/square.svg';
                me._defaultWidth = 12;
                me.__defaultHeight = 12;
                var options = layer.layer || {};
                me.options = options;
                var data = $.extend(true, [], options.data);

                var lngLatArray = mapUtils.toLngLatArray(mapView, data, options);
                var symbolFieldName = options.symbolFieldName || mapView.getSymbolFieldName();
                me._canvasClickHandle = [];

                me.setScale(map, me._element);

                me.convertSr(mapView, lngLatArray, callback);

                function callback(lngLatArray, sr) {
                    lngLatArray.map(function(lngLat, index) {
                        debugger
                        var point = mapUtils.createPoint(mapView, lngLat, { sr: sr });
                        var symbol = lngLat[symbolFieldName] || options.symbol || {};
                        // var div = {
                        //     _element: me.createDom("div", {
                        //         style: "position: absolute; left: 0px; top: 0px;"
                        //     })
                        // };
                        var div = new DivGraphic(point);
                        div.__graphic = lngLat.__graphic || {};
                        div.__graphic.__divGraphic = div;
                        var eleJQ = $(div.getElement());
                        // var eleJQ = $(div._element);
                        eleJQ.addClass(symbol.class).css(symbol.css || {}).html(symbol.html);
                        me.add(div);
                        // $(div.getElement()).addClass(symbol.class).css(symbol.css || {}).html(symbol.html);
                        div.attributes = lngLat;
                        me.add(div);

                        // me.setOffset(me.symbolOptions, eleJQ);

                        me.setCollision(div, options);

                        me._canvasClickHandle.push($(symbol.html).data('attr', lngLat).off('click').on('click', function(e) {
                            var attr = $(this).data('attr');
                            mapUtils._currentClickLayer = options.layerName;
                            if ($.isFunction(options.onClick)) {
                                options.onClick({
                                    mapView: mapView,
                                    data: attr,
                                    getLocation: function() {
                                        var esriEvent = { graphic: div };
                                        var location = me.getGraphicLocation(mapView, esriEvent);
                                        location.event = esriEvent;
                                        return location;
                                    }
                                });
                            }
                        }));

                        if (index == lngLatArray.length - 1) {
                            if (typeof options.callback == 'function') {
                                options.callback(layer);
                            };
                        };
                    });
                };
            },
            createDom(tag, options) {
                let obj = document.createElement(tag);
                for (let field in options) {
                    obj.setAttribute(field, options[field]);
                }
                return obj;
            },
            // getGraphicLocation: function (mapView, esriEvent) {
            //     var geometry = esriEvent.graphic.geometry;
            //     var lngFieldName = mapView.getLngFieldName();
            //     var latFieldName = mapView.getLatFieldName();
            //     var location = {}
            //     location[lngFieldName] = geometry.x;
            //     location[latFieldName] = geometry.y;
            //     return location;
            // },
            removeLayer: function() {
                this._canvasClickHandle.map(function(item) {
                    if (item && $.isFunction(item.off)) {
                        item.off('click');
                    }
                })
                this._canvasClickHandle = [];
            }

        });
        return CustomPieLayer;
    });